<!-- 引用自 https://gitee.com/layui/layui/issues/I6V5VY -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="./assets/dist/css/layui.css"
      href2="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.6/css/layui.css"
      href3="https://cdn.jsdelivr.net/gh/layui/layui@879a9c629cc832f5b235d138adf164d74c34991b/src/css/layui.css"
    />
  </head>

  <body>
    <div class="layui-fluid" style="padding: 15px">
      <button class="layui-btn" lay-on="asyncLoad">asyncLoad</button>
      <button class="layui-btn" lay-on="flatData">flatData</button>
      <button class="layui-btn" lay-on="expandNode">expandNode</button>
      <button class="layui-btn" lay-on="unexpandNode">unexpandNode</button>
      <table id="demo"></table>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
    <script
      src="./assets/dist/layui.js"
      src1="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.7/layui.js"
      src1="https://cdn.jsdelivr.net/gh/layui/layui@879a9c629cc832f5b235d138adf164d74c34991b/src/layui.js"
    ></script>
    <script>
      Mock.setup({
        timeout: '100-300',
      });
      layui.use(['treeTable', 'util'], () => {
        var treeTable = layui.treeTable;
        var util = layui.util;

        treeTable.set({});

        util.on({
          asyncLoad: () => {
            treeTable.reload(
              'demo',
              {
                url: '/getDatas',
                tree: {
                  data: {
                    isSimpleData: false,
                  },
                  async: {
                    enable: true,
                    autoParam: ['parentId=id'],
                  },
                  callback: {
                    onExpand: (tableId, trData, trExpand) => {
                      console.log('onExpand', tableId, trData.id, trExpand);
                    },
                  },
                },
              },
              true,
            );
          },
          flatData: () => {
            treeTable.reload(
              'demo',
              {
                data: testDatas,
                url: false,
                tree: {
                  data: {
                    isSimpleData: true,
                  },
                  async: {
                    enable: false,
                    autoParam: ['parentId=id'],
                  },
                },
              },
              true,
            );
          },
          expandNode: () => {
            treeTable.expandNode('demo', {
              index: 0,
              expandFlag: true,
              inherit: true,
              callbackFlag: true,
              done: (tableId, trData, trExpand) => {
                console.log('done', tableId, trData.id, trExpand);
              },
            });
          },
          unexpandNode: () => {
            treeTable.expandNode('demo', {
              index: 0,
              expandFlag: false,
              inherit: true,
              callbackFlag: true,
              done: (tableId, trData, trExpand) => {
                console.log('done', tableId, trData.id, trExpand);
              },
            });
          },
        });

        // 生成随机ID函数
        const createId = (() => {
          let nextId = 1;
          return () => nextId++;
        })();

        // 生成节点函数
        const createNode = (parentId = null, level = 0) => {
          const id = createId();
          const children =
            level < 3
              ? Mock.mock({
                  'array|0-5': [createNode.bind(null, id, level + 1)],
                }).array
              : [];

          return {
            id,
            name: `User${id}`,
            type: Mock.mock('@d6'),
            status: Mock.Random.d4(),
            score: Mock.Random.d100(),
            experience: Mock.Random.integer(1000, 99999),
            sex: Mock.Random.cword('男女', 1),
            city: Mock.Random.city(),
            description: Mock.mock('@cparagraph'),
            createTime: Mock.mock('@datetime'),
            parentId,
            children,
            isParent: !!children.length,
          };
        };

        // 生成树
        const rootNodes = Mock.mock({
          'array|10-20': [createNode],
        }).array;

        // 将树展开
        const flattenTree = (nodes, parentId = null) => {
          let result = [];
          nodes.forEach((node) => {
            result.push({
              ...node,
              parentId,
              children: undefined,
            });
            if (node.children.length > 0) {
              result = result.concat(flattenTree(node.children, node.id));
            }
          });
          return result;
        };

        const getTreeData = (nodes) => {
          const result = [];
          nodes.forEach((node) => {
            result.push({
              ...node,
              parentId: null,
              children: getTreeData(node.children),
            });
          });
          return result;
        };

        var testDatas = flattenTree(rootNodes);
        //var testDatas = getTreeData(rootNodes);

        Mock.mock(/getDatas/, 'get', (config) => {
          //console.log(config);
          var params = layui.url(config.url);
          var search = params.search;
          var parentId = search.parentId;
          var dataRet = testDatas.filter(
            (value, index, array) => value.parentId == parentId,
          );

          var sortColumn = search.sortColumn;
          var sortType = search.sortType;

          dataRet = layui.sort(dataRet, sortColumn, sortType === 'desc');

          var curr = search.page;
          if (!curr) {
            curr = 1;
          } else {
            curr = parseInt(curr);
            curr = curr || 1;
          }
          var limit = search.limit;
          if (!limit) {
            limit = dataRet.length;
          } else {
            limit = parseInt(limit);
            limit = limit || dataRet.length;
          }
          var start = (curr - 1) * limit;

          return {
            code: 0,
            data: dataRet.slice(start, start + limit),
            count: dataRet.length,
          };
        });

        treeTable.render({
          elem: '#demo',
          url: '/getDatas',
          totalRow: true,
          tree: {
            async: {
              enable: true,
              autoParam: ['parentId=id'],
            },
          },
          maxHeight: 'full-95',
          cols: [
            [
              { type: 'numbers', fixed: 'left' },
              {
                field: 'id',
                title: 'ID',
                width: 145,
                sort: true,
                fixed: 'left',
                totalRow: '合计：',
              },
              { field: 'name', title: '用户名', width: 180, fixed: 'left' },
              {
                field: 'experience',
                title: '积分',
                width: 90,
                sort: true,
                totalRow: '{{= d.TOTAL_NUMS }}',
              },
              { field: 'sex', title: '性别', width: 80, sort: true },
              {
                field: 'score',
                title: '评分',
                width: 80,
                sort: true,
                totalRow: true,
              },
              { field: 'city', title: '城市', width: 150, templet: '#tpl1' },
              {
                field: 'description',
                title: '描述信息',
                minWidth: 200,
                templet: '#tpl2',
              },
              { field: 'createTime', title: '创建时间', width: 170 },
            ],
          ],
          done: function (res, curr, count) {
            console.log('渲染完成', res, curr, count, this);
          },
        });
      });
    </script>
  </body>
</html>
